<template>
  <div ref="echartRef" class="echart" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必要的组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, RadarChart, CanvasRenderer])
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
})
// console.log('一级指标情况', props.data)
// 获取 dom 实例
const echartRef = ref(null)
// echarts 实例变量
let mChart = null
// 在 mounted 生命周期之后，实例化 echarts
onMounted(() => {
  mChart = echarts.init(echartRef.value)
  // 渲染 echarts
  renderChart()
})
const renderChart = () => {
  // 雷达图数据
  // const data = [
  //   {
  //     value: [8, 15, 10, 17, 12],
  //     name: '服务指标',
  //   },
  // ]
  // 动态生成指示器
  const maxRightItems = props.data.reduce((max, current) => {
    return Math.max(max, parseInt(current.rate, 10))
  }, -Infinity)

  const indicator = props.data.map((item) => ({
    name: item.index_name,
    max: maxRightItems,
  }))

  // 转换数据
  const radarData = [
    {
      value: props.data.map((item) => parseInt(item.rate, 10)),
      name: '一级指标情况',
    },
  ]
  // 雷达图配置项
  const option = {
    tooltip: {
      trigger: 'item',
    },
    radar: {
      name: {
        textStyle: {
          color: '#FFFFFF',
          // fontSize: 16,
        },
      },
      center: ['50%', '55%'],
      axisLine: {
        lineStyle: {
          color: 'rgba(116, 135, 168, 1)',
        },
      },
      // 雷达图的指示器，用于描述雷达图的数据
      indicator: indicator,
      splitArea: {
        areaStyle: {
          color: [
            // 'rgba(255, 255, 255, 0.1)',
            // 'rgba(255, 255, 255, 0.2)',
            // 'rgba(255, 255, 255, 0.3)',
          ],
        },
      },
      // axisLabel: {
      //   color: '#fff', // 设置指示器标签的颜色为白色
      // },
      splitLine: {
        lineStyle: {
          color: 'rgba(139, 104, 90, 1)', // 设置分割线颜色为白色
        },
      },
    },
    series: [
      {
        name: '一级指标情况',
        type: 'radar',
        data: radarData,
        itemStyle: {
          color: '#fff', // 设置雷达图点的颜色为白色
          borderColor: 'rgba(255, 88, 65, 1)',
        },
        areaStyle: {
          color: 'rgba(255, 70, 71, 0.6)',
        },
        lineStyle: {
          color: 'rgba(255, 88, 65, 1)',
        },
      },
    ],
    // animation: true,
    // // 启用图表的动画效果
    // animationDuration: 1500,
    // // 动画的持续时间为 1500 毫秒
    // animationEasing: 'quarticInOut',
  }
  mChart.setOption(option)
}
// 监听数据的变化，重新渲染图表
watch(
  () => props.data,
  () => {
    renderChart()
  },
)
</script>

<style scoped>
/* 可以在这里添加一些样式 */
.echart {
  /* background: radial-gradient(circle, rgba(54, 54, 54, 0.64), rgba(17, 17, 17, 1)); */
  background: radial-gradient(
    circle 46% at 82% 47%,
    rgba(17, 17, 17, 1),
    rgba(54, 54, 54, 0.64) 100%
  );
}
</style>
